<template>
	<view class="comming">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item,index in list.slice(0,5)" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">
			即将上映
		</view>
		<view class="list">
			<view class="item" v-for="item,index in  list" :key="index" @tap="toDetails(item.id)">
                <image :src="item.img" mode=""></image> 
				<view class="name">{{item.nm}}</view>
				<view class="star">{{item.star}}</view>
				<view class="coming">{{item.comingTitle}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"

	onLoad(() => {
		getMoveList()
	})
	const list = ref([])
	async function getMoveList() {
		let res = await uni.$get("https://m.maoyan.com/ajax/comingList?ci=10&token=&limit=10")
		console.log(res)
		list.value = res.data.coming
		console.log(list.value);
	}
	function toDetails(id)
	{
		uni.navigateTo({
			url:"/pages/details/details?movieId="+id
		})
	}
</script>

<style scoped lang="scss">
	.comming {
		swiper {
			height: 200px;

			image {
				width: 100%;
			}
		}
		.title{
			color:red;
			font-size: 35rpx;
			margin: 5px;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.item{
				width: 320rpx;
				border: 1px solid #ccc;
				padding: 10rpx;
				margin-bottom: 10px;
				 
				image{
					width: 300rpx;
					height: 450rpx;
					margin: 10rpx 10rpx 0 10rpx;
				}
				.name{
					color:red;
					font-weight: bold;
				}
				.star{
					color:#666;
					font-size: 26rpx;
					
				}
				.coming{
					color:#666;
					font-size: 24rpx;
				}
			}
		}
		
	}
</style>